<template>
  <div>
    <div class="homestayOverview">
      <div class="item">
        <div class="left">
          <p>商户数</p>
          <p>{{ info.merchantNums || 0 }}</p>
        </div>
        <img src="~@/assets/img/business/index1/icon.png" />
      </div>
      <div class="item">
        <div class="left">
          <p>今日订单数</p>
          <p>{{ info.todayOrders || 0 }}</p>
        </div>
        <img src="~@/assets/img/business/index1/icon2.png" />
      </div>
      <div class="item">
        <div class="left">
          <p>今日交易金额</p>
          <p>{{ info.totalAmount || 0 }}</p>
        </div>
        <img src="~@/assets/img/business/index1/icon3.png" />
      </div>
      <div class="item">
        <div class="left">
          <p>今日退款金额</p>
          <p>{{ info.totalRefundAmount || 0 }}</p>
        </div>
        <img src="~@/assets/img/business/index1/icon4.png" />
      </div>
    </div>
    <div class="chart">
      <div class="chartHead">
        <div class="left">商户分析</div>
        <div class="right">
          <div class="time">
            <i :class="time == 1 ? 'on' : ''" @click="time = 1">今日</i>
            <i :class="time == 2 ? 'on' : ''" @click="time = 2">本周</i>
            <i :class="time == 3 ? 'on' : ''" @click="time = 3">本月</i>
            <i :class="time == 4 ? 'on' : ''" @click="time = 4">本年</i>
          </div>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="chartContent">
        <div class="item" style="width: 32%">
          <div class="top">
            <span>支付渠道</span>
            <i>查看详情&nbsp;></i>
          </div>
          <div class="bottom">
            <div class="left">
              <div style="height: 100%" ref="roomTypePie"></div>
              <span class="empty" v-if="noData1">暂无数据</span>
            </div>
          </div>
        </div>
        <div class="item" style="width: 65%">
          <div class="top">
            <span>交易数据</span>
            <i>查看详情&nbsp;></i>
          </div>
          <div class="bottom">
            <div class="left" style="width: 100%">
              <div style="height: 100%" ref="occupancyAnalysis"></div>
              <span class="empty" v-if="noData2">暂无数据</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 退款金额 -->
      <div class="chartContent">
        <div class="item" style="width: 100%">
          <div class="top">
            <span>退款金额</span>
            <i>查看详情&nbsp;></i>
          </div>
          <div class="bottom">
            <div class="left" style="width: 100%">
              <div style="height: 100%" ref="refundMOney"></div>
              <span class="empty" v-if="noData2">暂无数据</span>
            </div>
          </div>
        </div>
      </div>

      <!-- table -->

      <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="今日订单" name="first"></el-tab-pane>
            <el-tab-pane label="今日退房" name="second"></el-tab-pane>
            <el-tab-pane label="明日入住" name="third"></el-tab-pane>
            <el-tab-pane label="明日退房" name="fourth"></el-tab-pane>

        </el-tabs> -->
    </div>
  </div>
</template>

<script>
var that;
import * as echarts from "echarts";
export default {
  components: {},
  watch: {
    time(newval, oldval) {
      if (newval != oldval) {
        this.getRoomType();
        this.getOccupancyAnalysis();
      }
    },
  },
  filters: {
    delStatus(val) {
      if (val) {
        let d = that.roomStatus.filter((item) => item.val == val);
        if (d.length != 0) {
          return d[0].label;
        }
      }
    },
  },
  data() {
    return {
      noData1: false,
      noData2: false,
      value1: "",
      time: 4,
      activeName: "first",
      info: {
        beCheckinOrders: 0,
        todayOrders: 0,
        totalAmount: 0,
        undeterminedOrders: 0,
        unpaidOrders: 0,
      },
      dataForm: {
        orderStatus: "",
        arriveDate: "",
        leaveDate: "",
        todayOrder: "",
      },
      roomTypeData: [],
    };
  },
  created() {
    that = this;
  },
  mounted() {
    this.getInfo();
    this.getRoomType();
    this.getOccupancyAnalysis();
  },
  methods: {
    line(xData, yData) {
      let myChart = echarts.init(this.$refs.refundMOney);
      const colorList = ["#3347FF", "#BACEFD", "#B1E8FC"];
      const seriesCommonFn = (name, data, color) => {
        return {
          name: name,
          data: data,
          type: "line",
          smooth: true,
          showSymbol: false,
          symbolSize: 10,
          emphasis: {
            focus: "series",
          },
          animationDuration: 1500,
          lineStyle: {
            width: 4,
          },
        };
      };
      const option = {
        color: colorList,
        legend: {
          show: true,
          right: 0,
          itemGap: 40,
          textStyle: {},
          itemStyle: {
            borderColor: "transparent",
            borderWidth: 3,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          color: "#000",
          borderColor: "transparent",
          backgroundColor: "rgba(116, 126, 253, 0.6)",
          extraCssText: "backdrop-filter: blur(6px);",
        },
        grid: {
          top: "14%",
          left: "2%",
          right: "2.5%%",
          bottom: "8%",
          containLabel: true,
        },
        series: yData.map((item, index) => {
          return seriesCommonFn(item.name, item.data, colorList[index]);
        }),
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xData,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：元",
            splitLine: {
              show: true,
              lineStyle: {
                // 虚线
                type: [5, 5],
                dashOffset: 0,
                shadowBlur: 0,
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    },
    bar(xdata, yData) {
      let myChart = echarts.init(this.$refs.occupancyAnalysis);
      const colorList = ["#3347FF", "#BACEFD", "#B1E8FC"];
      const seriesCommonFn = (name, data, color) => {
        return {
          name: name,
          data: data,
          type: "bar",
          stack: "machine",
          barWidth: 30,
          label: {
            show: true,
          },
          animationDuration: 1500,
        };
      };
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            let htmlStr = "";
            for (let i = 0; i < params.length; i++) {
              const param = params[i];
              const xName = param.name;
              const seriesName = param.seriesName;
              let value = "";
              const color = param.color;
              if (i === 0) {
                htmlStr += xName + "<br/>";
              }
              htmlStr += "<div>";
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                color +
                ';"></span>';
              if (param.value !== null && param.value !== undefined) {
                value = param.value;
                htmlStr += seriesName + ": " + value + "天";
              } else {
                value = "-";
                htmlStr += seriesName + ": " + value;
                htmlStr += "</div>";
              }
            }
            return htmlStr;
          },
          // formatter: '{a}<br />{c}'
        },
        color: ["#3347FF", "#BACEFD", "#B1E8FC"],
        legend: {
          show: true,
          top: "2%",
          right: "0",
          bottom: "1%",
          icon: "rect",
          itemWidth: 16, // 图例标记的图形宽度。
          itemHeight: 12, //  图例标记的图形高度。
          textStyle: {
            color: "#293C73",
            fontSize: 12,
            padding: [0, 8, 0, 8],
          },
        },
        grid: {
          left: "3%",
          right: "5%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              // 坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#EAEDF1",
              },
            },
            axisLabel: {
              // 坐标轴刻度标签的相关设置
              margin: 12,
              textStyle: {
                color: "#293C73",
                fontSize: 14,
              },
            },
            axisTick: {
              show: false,
            },
            data: xdata,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位:元",
            textStyle: {
              color: "#293C73",
              fontSize: 14,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#EAEDF1",
                type: "dashed",
              },
            },
            axisLine: {
              // 坐标轴轴线相关设置。数学上的y轴
              show: true,
              lineStyle: {
                color: "#293C73",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#293C73",
                fontSize: 14,
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: yData.map((item, index) => {
          return seriesCommonFn(item.name, item.data, colorList[index]);
        }),
      };
      myChart.setOption(option);
    },
    pie(dataOrgin) {
      let myChart = echarts.init(this.$refs.roomTypePie);
      let data = dataOrgin.map((item) => {
        return {
          name: this.$getDictLabel("MerchantCategory", item.merchantCategory),
          value: Math.floor(item.orderNums * 1000) / 1000,
        };
      });
      const option = {
        animation: true,
        grid: {
          top: "3%",
          left: "0%",
          bottom: "0%",
          right: "3%",
        },
        legend: {
          show: true,
          orient: "vertical",
          left: "70%",
          top: "60%",
        },
        tooltip: {
          show: true,
          backgroundColor: "#fff",
          borderColor: "#ddd",
          borderWidth: 1,
          formatter: (p) => {
            let txtCon =
              "<div style='text-align:left'>" +
              `<span style='color:#293C73'>` +
              p.name +
              `</span><br /><span style=color:#293C73'> ` +
              p.percent +
              "%</span></div>";
            return txtCon;
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 28,
                background: "#e4ff00",
                with: "10",
              },
              b: {
                fontSize: 20,
                color: "#e4ff00",
                padding: [0, 0, 14, 0],
              },
              c: {
                fontSize: 20,
                color: "#fff",
                padding: [5, 0],
              },
            },
          },
        },
        series: {
          type: "pie",
          center: ["40%", "55%"],
          radius: ["40%", "70%"],
          data: data,
          itemStyle: {
            borderColor: "#ffffff",
            borderWidth: 3,
          },
          color: ["#3347FF", "#B1E8FC", "#BACEFD"],
          labelLine: {
            show: true,
          },
          label: {
            show: true,
            formatter: "{b}\n{d}%",
          },
        },
      };
      myChart.setOption(option);
    },
    //头部统计
    getInfo() {
      this.$http
        .post("/scenic/home/getManageOverview", {
          merchantId: this.$store.state.user.homestayId,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.info = res.data.data;
          }
        });
    },

    getRoomType() {
      this.$http
        .post("/scenic/home/getManageOrderAnalyse", {
          merchantId: this.$store.state.user.homestayId,
          dateType: this.time,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.roomTypeData = res.data.data || [];
            if (!res.data.data || res.data.data.length == 0) {
              this.noData1 = true;
            } else {
              this.noData1 = false;
            }
            this.pie(this.roomTypeData);
          }
        });
    },
    getOccupancyAnalysis() {
      this.$http
        .post("/scenic/home/getManageMerchantAnalyse", {
          merchantId: this.$store.state.user.homestayId,
          dateType: this.time,
        })
        .then((res) => {
          if (res.data.code == 0) {
            if (!res.data.data || res.data.data.length == 0) {
              this.noData2 = true;
            } else {
              this.noData2 = false;
            }
            let xdata = [];
            let ydata = [];
            for (let k in res.data.data) {
              let y = res.data.data[k].map((item) => {
                xdata.push(item.dateKey);
                return Math.floor(item.refundAmount * 1000) / 1000;
              });
              ydata.push({
                name: this.$getDictLabel("MerchantCategory", k),
                data: y,
              });
              this.line(xdata, ydata);
              this.bar(xdata, ydata);
            }
            // this.roomTypeData = res.data.data;
            // let x = [],
            //     y = [];
            // for (let i = 0; i < res.data.data.length; i++) {
            //     x.push(res.data.data[i].rentDate.substring(5));
            //     y.push(res.data.data[i].ratio)
            // }
            // this.bar(x, y);
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.homestayOverview {
  display: grid;
  gap: 0 16px;
  grid-template-columns: auto auto auto auto;

  .item {
    border-radius: 6px;
    display: flex;
    padding: 24px 24px 24px 32px;
    background-color: #fff;
    align-items: center;
    justify-content: space-between;

    &:nth-child(1) {
      background: url(~@/assets/img/business/index1/bg.png) center no-repeat;
      background-size: 100% 100%;
    }

    &:nth-child(2) {
      background: url(~@/assets/img/business/index1/bg2.png) center no-repeat;
      background-size: 100% 100%;
    }

    &:nth-child(3) {
      background: url(~@/assets/img/business/index1/bg3.png) center no-repeat;
      background-size: 100% 100%;
    }

    &:nth-child(4) {
      background: url(~@/assets/img/business/index1/bg4.png) center no-repeat;
      background-size: 100% 100%;
    }

    .left {
      position: relative;

      p {
        margin: 0;
        color: #fff;

        &:first-child {
          font-size: 16px;
          color: #fff;
          margin-bottom: 8px;
        }

        &:last-child {
          font-size: 32px;
          font-weight: bold;
        }
      }
    }

    img {
      width: 56px;
      height: 56px;
    }
  }
}

.tableBox {
  border-radius: 6px;
  padding: 0 20px 20px;
  background-color: #fff;

  ::v-deep .el-tabs__item {
    font-size: 20px;
    font-family: Source Han Sans SC, Source Han Sans SC;
    color: #53628f;
    padding: 16px;
    height: auto;
    line-height: normal;

    &.is-active {
      font-weight: bold;
      color: #1372ff;
    }
  }
}

.chart {
  background: #fff;

  .chartHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 0 0 32px;
    border-bottom: 1px solid #eaedf1;

    ::v-deep .el-range-editor.el-input__inner {
      transform: scale(0.75);
      margin-left: -35px;
    }

    .right {
      width: 200px;
      flex: 1;
      margin-right: -20px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .time {
        i {
          display: inline-block;
          width: 72px;
          height: 28px;
          background: #eaedf1;
          border-radius: 4px;
          font-style: inherit;
          text-align: center;
          line-height: 28px;
          color: #293c73;
          margin: 0 4px;

          &.on {
            background: #1372ff;
            color: #fff;
          }
        }
      }
    }
  }

  .chartContent {
    padding: 24px 32px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item {
      background: #ffffff;
      border-radius: 6px;

      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eaedf1;

        span {
          display: block;
          flex: 1;
          font-size: 16px;
          font-weight: bold;
          padding: 0 0 8px 12px;
          color: #293c73;
          position: relative;

          &::after {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 3px;
            height: 16px;
            background: #1372ff;
            border-radius: 62px;
          }
        }

        i {
          font-style: inherit;
          color: #53628f;
          font-size: 14px;
          margin-bottom: 10px;
        }
      }

      .bottom {
        padding-top: 20px;

        .left {
          position: relative;
          height: 260px;
        }
      }
    }
  }
}

.empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
